﻿@{
    ViewData["Title"] = "UserView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



 
    <form class="layui-form layui-row layui-col-space20" >
       
        <div class="layui-row" >
          
            <div style="margin-left:850px">
                <div class="layui-col-sm2" style="width:100px;">
                    <select id="nameType" name="nameType">
                        <option value="1">用户名</option>
                        <option value="2">部门名</option>
                    </select>
                </div>
                <div class="layui-col-sm2" style="width:100px;">
                    <input type="text" id="serchName" name="serchName" placeholder="请输入用户名" class="layui-input">
                </div>
            </div>     
        </div>
    </form>
    <table class="layui-table" id="demoTable" style="text-align:center" lay-filter="demoTable">
    </table>
<script type="text/html" id="toolbarDemo">
    @* <div style="display:flex">
         <div >
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
        </div>

    </div> *@
</script>
    <div id="demo-laypage-all"></div>

    <script >

    layui.use(['element', 'form', 'laypage', 'table', 'util', 'jquery'], function () {

        var element = layui.element;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var laypage = layui.laypage;

        var from = {
            "serchName": "",
            nameType: 1,
            "pageIndex": 1,
            "pageSize": 3
        }


        //文本框失去焦点事件
        $('#serchName').on('blur', function () {
            from.nameType = $("[name=nameType]").val();
            from.serchName = $("[name=serchName]").val();
            // 在这里调用查询函数
            show();
        });

        //总条数
        var total = 0;
        //显示数据
        function show() {
            $.ajax({
                url: "http://localhost:5174/api/Users/GetUsers",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(from),
                async: false,
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                success: res => {
                    total = res.data.total;
                    //渲染表格
                    table.render({
                        elem: "#demoTable",
                        data: res.data.data,
                        toolbar: '#toolbarDemo',
                       
                        cols: [[
                            { field: "userId", title: "用户编号" , width: 100 },
                            { field: "departMentName", title: "部门" },
                            { field: "userName", title: "用户名称" },
                            { field: "phone", title: "手机号" },
                            { field: "nickName", title: "用户真实姓名" },
                            { field: "email", title: "邮箱" },
                            { field: "storeName", title: "酒店名称" },
                        ]]
                    });
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
        show();
        //渲染分页
        laypage.render({
            elem: 'demo-laypage-all', // 元素 id
            count: total, // 数据总数
            limit: from.pageSize,
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
            limits: [3, 4, 5, 6],
            prev: '<em>←</em>',
            next: '<em>→</em>',
            //页面跳转时
            jump: function (obj, first) {
                //非首次加载时调用
                if (!first) {
                    from.pageIndex = obj.curr;
                    from.pageSize = obj.limit;
                    show()
                }
            }
        });
    })

</script>


